import React from 'react'
import NavLink from './NavLink'
// import {Route,hashHistory} from 'react-router'

const HoverNav = React.createClass({
    getInitialState() {
        return{
            pos: 0,
            active:0,
        }
    },
    componentWillMount() {
        let navList={'/':0,'/about':1,'/skill':2,'/hobby':3};
        // console.log(this.props.nowPath);
        this.setState({
            pos:navList[this.props.nowPath]
        })
    },
    swipe(num) {
        this.setState({
            pos: num,
        });
    },
    beActive(key) {
        this.setState({
            active: key
        })
    },
    comeBack() {
        this.setState({
            pos: this.state.active
        })
    },
    render() {
        return(
            <div className="nav-wrap">
                <div className="hover-block" style={{left: this.state.pos*120}}>

                </div>
                <ul className="nav" role="nav">
                    {
                        this.props.navOption.map(function (item,key) {
                            return(
                                <li className="nav-item" key={key} onMouseEnter={this.swipe.bind(this,key)} onMouseLeave={this.comeBack} onClick={this.beActive.bind(this,key)}>
                                    <NavLink to={item.url} onlyActiveOnIndex={key==0 ? true : false}>
                                        {item.word}
                                    </NavLink>
                                </li>
                            )
                        }.bind(this))
                    }
                </ul>
            </div>
        )
    }
});

module.exports=HoverNav;
